<template>
  <div>
    <topbar />
    <logo_nav />
    <div class="index_more_nav_box">
      <div class="index_more_nav_box_mid">
        <div class="index_shop_type">
          <div class="index_shop_type_nav">
            <div class="index_shop_type_nav_title">精品分类</div>
            <ul>
              <li v-for="data in 15">
                <div class="index_shop_type_nav_box">
                  <img src="../assets/images/index/nav-img-girl.png" />
                  <div class="index_nav_box_lable">
                    <router-link
                      to="/search/shop?name=nanzhuang"
                      target="_blank"
                    >
                      男装</router-link
                    ><i>/</i>
                    <router-link to="/search/shop" target="_blank"
                      >衣裤</router-link
                    ><i>/</i>
                    <router-link to="/search/shop" target="_blank"
                      >数码</router-link
                    >
                  </div>
                </div>
              </li>
            </ul>
          </div>
          <div class="index_shop_type_other">
            <div class="index_shop_other_title">
              <ul>
                <!-- 动态修改小导航样式 -->
                <li v-for="data in nav_list">
                  <router-link
                    :to="data.url"
                    target="_blank"
                    :style="
                      'font-weight: ' + data.font + ';color:' + data.color
                    "
                  >
                    {{ data.name }}
                  </router-link>
                </li>
              </ul>
            </div>
            <div class="index_shop_other_rotation_box">
              <div class="index_shop_other_rotation">
                <el-carousel :interval="5000" arrow="always" height="390px">
                  <el-carousel-item
                    v-for="(item, index) in rotation_list"
                    :key="index"
                  >
                    <router-link :to="item.url" target="_blank">
                      <img
                        class="index_shop_other_rotation_img"
                        :src="item.img_url"
                        alt=""
                      />
                    </router-link>
                  </el-carousel-item>
                </el-carousel>
              </div>
              <div class="index_shop_other_login">
                <div class="index_shop_other_login_0">
                  <div class="index_shop_other_login_0_icon">
                    <img src="../assets/images/logo/xiaobaishop_1.jpg" />
                  </div>
                  <div
                    class="index_shop_other_login_0_name"
                    v-show="!login_status"
                  >
                    Hi 请登录
                  </div>
                  <div
                    class="index_shop_other_login_0_name"
                    v-show="login_status"
                  >
                    {{ user_name }}
                  </div>
                  <div
                    class="index_shop_other_login_0_login_menu"
                    v-show="!login_status"
                  >
                    <router-link to="/login">
                      <button class="index_shop_btn_login">登录</button>
                    </router-link>
                    <router-link to="regist">
                      <button class="index_shop_btn_register">注册</button>
                    </router-link>
                    <a href="/#/operstores" target="_blank">
                      <button>开店</button>
                    </a>
                  </div>
                  <div
                    class="index_shop_other_login_0_login_menu"
                    v-show="login_status"
                  >
                    <div class="index_shop_other_login_user_info_box_item">
                      <span>99+</span>
                      <a href="#"
                        ><span
                          class="index_shop_other_login_user_info_box_item_span"
                          >购物车</span
                        ></a
                      >
                    </div>
                    <div class="index_shop_other_login_user_info_box_item">
                      <span>99+</span>
                      <a href="#"
                        ><span
                          class="index_shop_other_login_user_info_box_item_span"
                          >待收货</span
                        ></a
                      >
                    </div>
                    <div class="index_shop_other_login_user_info_box_item">
                      <span>99+</span>
                      <a href="#"
                        ><span
                          class="index_shop_other_login_user_info_box_item_span"
                          >待付款</span
                        ></a
                      >
                    </div>
                    <div class="index_shop_other_login_user_info_box_item">
                      <span>99+</span>
                      <a href="#"
                        ><span
                          class="index_shop_other_login_user_info_box_item_span"
                          >待评价</span
                        ></a
                      >
                    </div>
                  </div>
                </div>
                <div class="index_shop_other_notice">
                  <ul>
                    <li v-for="data in 5">
                      <a href="#"
                        ><span>最新</span
                        >{{ data }}最近动态最近动态最近动态最近动态最近动态</a
                      >
                    </li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="index_shop_other_adv_box">
              <div class="index_shop_other_adv_box_lunbo">
                <el-carousel height="100px">
                  <el-carousel-item
                    v-for="item in 4"
                    :key="item"
                    indicator-position="outside"
                  >
                    <div class="index_shop_other_adv_box_lunbo_item">
                      <div class="index_shop_lunbo_item_img">
                        <a href="#"
                          ><img src="../assets/images/index/l1-1.jpg"
                        /></a>
                      </div>
                      <div class="index_shop_lunbo_item_img">
                        <a href="#"
                          ><img src="../assets/images/index/l1-2.jpg"
                        /></a>
                      </div>
                      <div class="index_shop_lunbo_item_img">
                        <a href="#"
                          ><img src="../assets/images/index/l1-1.jpg"
                        /></a>
                      </div>
                    </div>
                  </el-carousel-item>
                </el-carousel>
              </div>
              <div class="index_shop_other_adv_box_box"></div>
            </div>
          </div>
        </div>
        <div class="index_shop_guess_like">
          <div class="index_shop_guess_title">
            <span class="index_shop_guess_title_span">猜你喜欢</span>
            <span class="index_shop_guess_title_lable">精品推荐</span>
          </div>
          <div class="index_shop_item_box">
            <router-link
              :to="{ path: '/items', query: { id: index+1 } }"
              v-for="(item, index) in shop_list"
              :key="index"
            >
              <div class="index_shop_item">
                <div class="index_shop_item_img">
                  <img :src="item.shop_img_url" />
                </div>
                <div class="index_shop_item_text_box">
                  <div class="index_shop_item_text_box_text">
                    {{ item.shop_describe }}
                  </div>
                  <div class="index_shop_item_text_box_lables">
                    <span>{{ item.shop_label }}</span>
                  </div>
                  <div class="index_shop_item_text_box_price">
                    <i>￥</i>
                    <span>{{ item.shop_price }}</span>
                  </div>
                </div>
              </div>
            </router-link>
          </div>
          <div class="index_shop_item_end_box">-- END --</div>
          <div class="index_shop_item_consumer_box">
            <ul>
              <li>
                <div class="index_shop_item_consumer_box_title">
                  <svg
                    t="1651842816718"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="2119"
                    width="200"
                    height="200"
                  >
                    <path
                      d="M859.553531 223.46735c-131.266167-0.273397-251.874989-45.271187-347.712244-120.449085-95.882309 75.019185-216.28634 120.176713-347.417344 120.449085-87.404969 286.237962 63.019433 593.928847 347.531004 697.515408C796.534098 817.396197 946.982051 509.705312 859.553531 223.46735zM201.448179 514.182052l310.551821 0L512 160.980375c92.522706 64.419182 199.064407 101.307233 311.691485 107.939403 19.76237 82.987619 18.331902 166.81181-1.178574 245.262275L512 514.182052 512 871.126293c-0.015359 0.006144-0.029695 0.012287-0.045054 0.018431C352.376368 807.140244 240.559241 671.464918 201.448179 514.182052z"
                      p-id="2120"
                    ></path>
                  </svg>
                  <span>消费者保障权益</span>
                </div>
                <div class="index_shop_item_consumer_box_text">
                  <router-link to="/">保障范围</router-link>
                  <router-link to="/">退货退款流程</router-link>
                  <router-link to="/">服务中心</router-link>
                  <router-link to="/">更多特色服务</router-link>
                </div>
              </li>
              <li>
                <div class="index_shop_item_consumer_box_title">
                  <svg
                    t="1651922837721"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="1953"
                    width="200"
                    height="200"
                  >
                    <path
                      d="M514.048 54.272q95.232 0 178.688 36.352t145.92 98.304 98.304 145.408 35.84 178.688-35.84 178.176-98.304 145.408-145.92 98.304-178.688 35.84-178.176-35.84-145.408-98.304-98.304-145.408-35.84-178.176 35.84-178.688 98.304-145.408 145.408-98.304 178.176-36.352zM515.072 826.368q26.624 0 44.544-17.92t17.92-43.52q0-26.624-17.92-44.544t-44.544-17.92-44.544 17.92-17.92 44.544q0 25.6 17.92 43.52t44.544 17.92zM567.296 574.464q-1.024-16.384 20.48-34.816t48.128-40.96 49.152-50.688 24.576-65.024q2.048-39.936-8.192-74.752t-33.792-59.904-60.928-39.936-87.552-14.848q-62.464 0-103.936 22.016t-67.072 53.248-35.84 64.512-9.216 55.808q1.024 26.624 16.896 38.912t34.304 12.8 33.792-10.24 15.36-31.232q0-12.288 7.68-30.208t20.992-34.304 32.256-27.648 42.496-11.264q46.08 0 73.728 23.04t25.6 57.856q0 17.408-10.24 32.256t-26.112 28.672-33.792 27.648-33.792 28.672-26.624 32.256-11.776 37.888l1.024 38.912q0 15.36 14.336 29.184t37.888 14.848q23.552-1.024 37.376-15.36t12.8-32.768l0-24.576z"
                      p-id="1954"
                    ></path>
                  </svg>
                  <span>新手上路</span>
                </div>
                <div class="index_shop_item_consumer_box_text">
                  <router-link to="/">新手专区</router-link>
                  <router-link to="/">24小时在线帮助</router-link>
                  <router-link to="/">免费开店</router-link>
                </div>
              </li>
              <li>
                <div class="index_shop_item_consumer_box_title">
                  <svg
                    t="1651922919941"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="2789"
                    width="200"
                    height="200"
                  >
                    <path
                      d="M512 1012.363636C235.659636 1012.363636 11.636364 788.340364 11.636364 512S235.659636 11.636364 512 11.636364 1012.363636 235.659636 1012.363636 512 788.340364 1012.363636 512 1012.363636z m0-69.818181c237.777455 0 430.545455-192.768 430.545455-430.545455S749.777455 81.454545 512 81.454545 81.454545 274.222545 81.454545 512 274.222545 942.545455 512 942.545455z m172.520727-498.734546h-0.023272c17.105455 0 32 15.546182 32 32.651636v3.607273c0 17.198545-14.894545 30.114909-32 30.114909h-139.799273v58.181818h110.708363c17.477818 0.372364 31.581091 14.429091 32 31.90691v3.653818c0 17.105455-14.894545 29.905455-32 29.905454h-110.708363v135.610182a32.744727 32.744727 0 0 1-65.466182 0v-135.656727h-111.36c-17.082182 0-30.464-12.8-30.464-29.858909v-3.653818c0-17.105455 13.381818-31.906909 30.464-31.90691h111.429818v-58.181818h-140.404363a30.952727 30.952727 0 0 1-31.162182-30.72v-3.002182c0.069818-17.221818 13.963636-31.185455 31.185454-31.371636h151.365818c-0.674909 0-1.28-0.884364-1.954909-1.559273l-107.426909-107.357091a32.861091 32.861091 0 0 1 0.116364-46.42909 32.861091 32.861091 0 0 1 46.429091-0.186182l84.48 84.363636 83.968-84.107636a32.651636 32.651636 0 0 1 46.266182-0.069818c12.846545 12.730182 12.730182 33.28-0.069819 46.08l-107.450181 107.10109c-0.651636 0.605091-1.28 0.884364-1.931637 0.884364h151.808z"
                      p-id="2790"
                    ></path>
                  </svg>
                  <span>付款方式</span>
                </div>
                <div class="index_shop_item_consumer_box_text">
                  <router-link to="/">小白快捷支付</router-link>
                  <router-link to="/">信用卡支付</router-link>
                  <router-link to="/">支付宝支付</router-link>
                  <router-link to="/">微信支付</router-link>
                  <router-link to="/">翼支付</router-link>
                </div>
              </li>
              <li>
                <div class="index_shop_item_consumer_box_title">
                  <svg
                    t="1651923043157"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="3559"
                    width="200"
                    height="200"
                  >
                    <path
                      d="M253.544577 329.980433c5.282307 3.466961 11.229762 5.124717 17.111726 5.124717 10.157337 0 20.116153-4.951779 26.119891-14.071484 9.475815-14.407128 5.479805-33.765011-8.91709-43.252083-15.093766-9.953699-31.442106-23.658839-36.866652-30.715559L250.992451 140.767024c0-7.53358 6.130627-13.665231 13.665231-13.665231l122.58185 0 0 106.61418c0 17.253966 13.985526 31.234375 31.234375 31.234375 17.248849 0 31.233352-13.980409 31.233352-31.234375L449.707258 127.102816l124.935454 0 0 106.61418c0 17.253966 13.985526 31.234375 31.233352 31.234375 17.248849 0 31.234375-13.980409 31.234375-31.234375L637.110439 127.102816l122.602316 0c7.518231 0 13.639648 6.130627 13.639648 13.665231l0 108.515483c-4.076852 6.456039-19.989263 18.992563-34.299177 26.851555-15.143908 8.266267-20.720927 27.238364-12.45466 42.377156 8.261151 15.159258 27.263947 20.73116 42.377156 12.464893 20.095687-10.970866 66.844407-40.618093 66.844407-79.019705L835.82013 140.767024c0-41.981137-34.141588-76.132958-76.107375-76.132958l-495.055073 0c-41.981137 0-76.132958 34.151821-76.132958 76.132958l0 111.189382C188.524724 275.381931 210.399941 301.633828 253.544577 329.980433z"
                      p-id="3560"
                    ></path>
                    <path
                      d="M512.171915 292.330952c-184.078459 0-333.837274 149.763932-333.837274 333.842391s149.758816 333.832158 333.837274 333.832158 333.837274-149.753699 333.837274-333.832158S696.250374 292.330952 512.171915 292.330952zM512.171915 897.537773c-149.631926 0-271.369547-121.732505-271.369547-271.364431s121.737622-271.374664 271.369547-271.374664 271.369547 121.742738 271.369547 271.374664S661.803841 897.537773 512.171915 897.537773z"
                      p-id="3561"
                    ></path>
                    <path
                      d="M390.283868 508.538155c-17.248849 0-31.234375 13.980409-31.234375 31.233352l0 30.470989c0 17.253966 13.985526 31.234375 31.234375 31.234375 17.248849 0 31.234375-13.980409 31.234375-31.234375l0-30.470989C421.518243 522.518564 407.532717 508.538155 390.283868 508.538155z"
                      p-id="3562"
                    ></path>
                    <path
                      d="M634.059963 508.538155c-17.248849 0-31.234375 13.980409-31.234375 31.233352l0 30.470989c0 17.253966 13.985526 31.234375 31.234375 31.234375s31.234375-13.980409 31.234375-31.234375l0-30.470989C665.294338 522.518564 651.308813 508.538155 634.059963 508.538155z"
                      p-id="3563"
                    ></path>
                    <path
                      d="M588.966952 649.598868c-14.544251-9.323343-33.846876-5.053086-43.149752 9.455349-0.121773 0.193405-13.379729 19.449981-33.968649 19.449981-19.99438 0-32.428573-18.107403-33.272801-19.36914-9.175987-14.427594-28.28009-18.819624-42.829458-9.760295-14.655791 9.099239-19.155269 28.356838-10.04989 43.007513 11.209296 18.047028 41.97602 48.589648 86.152149 48.589648 43.958164 0 75.100442-30.308283 86.574774-48.223305C607.725178 678.219719 603.490737 658.901745 588.966952 649.598868z"
                      p-id="3564"
                    ></path>
                  </svg>
                  <span>小白特色服务</span>
                </div>
                <div class="index_shop_item_consumer_box_text">
                  <router-link to="/">微信小程序</router-link>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <bottom />
  </div>
</template>

<script>
import topbar from "@/components/topbar";
import logo_nav from "@/components/logo_nav";
import bottom from "@/components/bottom";
import { mapState } from "vuex";
import conf from "@/config/index.js";

export default {
  name: "index",
  data() {
    return {
      shop_list: [
        {
          shop_id: "1",
          shop_describe: "商品描述",
          shop_label: "免运费险",
          shop_price: "1000.00",
          shop_img_url: require("@/assets/images/index/shop_item.jpg"),
        },
        {
          shop_id: "1",
          shop_describe: "商品描述",
          shop_label: "免运费险",
          shop_price: "1000",
          shop_img_url: require("@/assets/images/index/shop_item.jpg"),
        },
        {
          shop_id: "1",
          shop_describe: "商品描述",
          shop_label: "免运费险",
          shop_price: "1000",
          shop_img_url: require("@/assets/images/index/shop_item.jpg"),
        },
        {
          shop_id: "1",
          shop_describe: "商品描述",
          shop_label: "免运费险",
          shop_price: "1000",
          shop_img_url: require("@/assets/images/index/shop_item.jpg"),
        },
        {
          shop_id: "1",
          shop_describe: "商品描述",
          shop_label: "免运费险",
          shop_price: "1000",
          shop_img_url: require("@/assets/images/index/shop_item.jpg"),
        },
        {
          shop_id: "1",
          shop_describe: "商品描述",
          shop_label: "免运费险",
          shop_price: "1000",
          shop_img_url: require("@/assets/images/index/shop_item.jpg"),
        },
      ],
      rotation_list: [
        {
          url: "/",
          img_url:
            "https://gtms03.alicdn.com/tps/i3/TB1gXd1JXXXXXapXpXXvKyzTVXX-520-280.jpg",
        },
        {
          url: "/",
          img_url:
            "https://gtms02.alicdn.com/tps/i2/TB10vPXKpXXXXacXXXXvKyzTVXX-520-280.jpg",
        },
        {
          url: "/",
          img_url:
            "https://img.alicdn.com/imgextra/i3/6000000002825/O1CN01Stu1aF1WjtdQLKd1p_!!6000000002825-0-octopus.jpg",
        },
        {
          url: "/",
          img_url:
            "https://gtms01.alicdn.com/tps/i1/TB1r4h8JXXXXXXoXXXXvKyzTVXX-520-280.jpg",
        },
      ],
      nav_list: [
        {
          name: "手机",
          color: "#ff5a5a",
          url: "/search/shop",
          font: "bold",
        },
        {
          name: "数码",
          color: "#695353",
          url: "/search/shop",
          font: "bold",
        },
        {
          name: "家电",
          color: "#901aff",
          url: "/search/shop",
          font: "bold",
        },
        {
          name: "服饰",
          color: "#ff5a5a",
          url: "/search/shop",
          font: "bold",
        },
        {
          name: "鞋子",
          color: "#0053ff",
          url: "/search/shop",
          font: "bold",
        },
        {
          name: "包包",
          color: "#0053ff",
          url: "/search/shop",
          font: "bold",
        },
        {
          name: "美妆",
          color: "#0053ff",
          url: "/search/shop",
          font: "bold",
        },
        {
          name: "美甲",
          color: "#0053ff",
          url: "/search/shop",
          font: "bold",
        },
      ],
      login_status: false,
      user_name: "猛踹瘸子那条好腿",
    };
  },
  created() {
    document.title = conf.title;
    this.checkUserLoginStatus();

    console.log(JSON.stringify(this.shop_list));
  },
  methods: {
    checkUserLoginStatus() {
      const userStatus = this.users.apply();
      if (userStatus.length == 0) {
        /**
         * 用户未登录
         */
        console.log("主页用户未登录");
      }
    },
  },
  computed: {
    ...mapState({
      users: (state) => state.user,
    }),
  },
  components: {
    topbar,
    logo_nav,
    bottom,
  },
};
</script>

<style scoped>
.index_shop_lunbo_item_img img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}
.index_shop_lunbo_item_img {
  width: 32%;
  height: 100%;
  border-radius: 10px;
  background-color: #e4e7ed;
}
.index_shop_other_adv_box_lunbo_item {
  width: 100%;
  height: calc(100% - 10px);
  margin-top: 5px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around;
}
.index_shop_other_adv_box_box {
  width: 280px;
  height: 100%;
  float: left;
}
.index_shop_other_adv_box_lunbo {
  width: 700px;
  height: 100%;
  float: left;
}
.index_shop_other_login_user_info_box_item a:hover {
  text-decoration: underline;
}

.index_shop_other_login_user_info_box_item_span {
  color: #442f1a !important;
  font-weight: unset !important;
  font-size: 12px !important;
}

.index_shop_other_login_user_info_box_item span {
  width: 100%;
  height: 20px;
  display: block;
  text-align: center;
  font-size: 14px;
  line-height: 20px;
  color: #ff4400;
  font-weight: bold;
}

.index_shop_other_login_user_info_box_item {
  width: 50px;
  height: 100%;
}

.index_shop_item_end_box {
  width: 100%;
  height: 50px;
  text-align: center;
  font-weight: bold;
  margin-top: 10px;
  color: #e4e7ed;
}

.index_shop_item_consumer_box_text a:hover {
  color: #442f1a;
}

.index_shop_item_consumer_box_text a {
  color: #958a7e;
  font-family: "新宋体", serif;
  margin-right: 5px;
  font-size: 12px;
  transition-duration: 0.3s;
}

.index_shop_item_consumer_box_text {
  width: 100%;
  height: calc(100% - 50px);
}

.index_shop_item_consumer_box_title svg {
  width: 30px;
  height: 30px;
  position: relative;
  top: 10px;
  left: 5px;
}

.index_shop_item_consumer_box_title span {
  width: auto;
  padding-left: 10px;
  padding-right: 10px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  display: block;
  font-family: "新宋体", serif;
  font-weight: bold;
}

.index_shop_item_consumer_box_title {
  width: 100%;
  height: 50px;
  display: flex;
  flex-wrap: nowrap;
}

.index_shop_item_consumer_box ul {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-evenly;
}

.index_shop_item_consumer_box li {
  width: 220px;
  height: 100%;
}

.index_shop_item_consumer_box {
  width: 100%;
  height: 120px;
  /*margin-top: 10px;*/
}

.index_shop_item_text_box_price span {
  font-size: 22px;
}

.index_shop_item_text_box_price i {
  font-size: 14px;
  font-style: unset;
}

.index_shop_item_text_box_price {
  width: 100%;
  height: 40px;
  margin-top: 20px;
  color: #ff4400;
}

.index_shop_item_text_box_lables span {
  display: block;
  width: auto;
  padding-left: 10px;
  padding-right: 10px;
  height: 20px;
  font-size: 12px;
  text-align: center;
  border-radius: 4px;
  line-height: 22px;
  border: 1px solid #958a7e;
  background-color: #f5f0ec;
  color: #958a7e;
  margin-right: 2px;
}

.index_shop_item_text_box_lables {
  width: 100%;
  height: 30px;
  display: flex;
  flex-wrap: nowrap;
}

.index_shop_item_text_box_text:hover {
  text-decoration: underline;
}

.index_shop_item_text_box_text {
  padding-top: 10px;
  width: 100%;
  height: 60px;
  font-size: 16px;
  color: #958a7e;
  overflow: hidden;
  line-height: 30px;
  font-family: "新宋体", serif;
}

.index_shop_item_text_box {
  width: calc(100% - 160px);
  height: 100%;
  float: left;
}

.index_shop_item_img img:hover {
  opacity: 0.8;
}

.index_shop_item_img img {
  width: 140px;
  height: 140px;
  transition-duration: 0.3s;
  position: relative;
  top: 10px;
  left: 10px;
  border-radius: 5px;
}

.index_shop_item_img {
  width: 160px;
  height: 100%;
  float: left;
}

.index_shop_item:hover {
  border: 1px solid #958a7e;
}

.index_shop_item {
  width: 380px;
  height: 160px;
  transition-duration: 0.3s;
  border: 1px solid #ffffff;
  border-radius: 10px;
  display: flex;
  flex-wrap: nowrap;
  overflow: hidden;
  margin-top: 10px;
  background-color: #e8e2e050;
}

.index_shop_item_box {
  width: 100%;
  height: auto;
  padding-bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

.index_shop_guess_title_lable {
  width: auto;
  padding-left: 10px;
  padding-right: 10px;
  height: 20px;
  line-height: 22px;
  margin: 40px 20px;
  display: block;
  float: left;
  color: #e4e7ed;
  font-size: 12px;
  background-color: #958a7e;
  border-radius: 5px;
}

.index_shop_guess_title_span {
  width: auto;
  height: 100px;
  font-weight: bold;
  font-size: 26px;
  font-family: "新宋体", serif;
  line-height: 100px;
  margin-left: 40px;
  float: left;
}

.index_shop_guess_title {
  width: 100%;
  height: 100px;
}

.index_shop_guess_like {
  width: 100%;
  height: auto;
  background-color: #ffffff;
  margin-top: 20px;
  border-radius: 10px;
  padding-bottom: 10px;
}

/*主页分类*/
.index_shop_other_notice span {
  background-color: #3e5ae7;
  padding-left: 2px;
  padding-right: 2px;
  color: #e4e7ed;
  height: 30px;
}

.index_shop_other_notice a:hover {
  text-decoration: underline;
}

.index_shop_other_notice a {
  width: 100%;
  height: 30px;
  display: block;
  color: #442f1a;
  font-size: 12px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.index_shop_other_notice li {
  width: calc(100% - 20px);
  height: 30px;
  margin-left: 10px;
  line-height: 30px;
}

.index_shop_btn_register {
  background-color: #958a7e90;
  color: #ffffff;
}

.index_shop_btn_login {
  background-color: #958a7e;
  color: #ffffff;
}

.index_shop_other_login_0_login_menu button {
  width: auto;
  padding-left: 15px;
  padding-right: 15px;
  height: 35px;
  border-style: unset;
  font-size: 14px;
  border-radius: 15px;
  cursor: pointer;
}

.index_shop_other_login_0_login_menu {
  width: 100%;
  height: 40px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-evenly;
}

.index_shop_other_login_0_name {
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
}

.index_shop_other_notice {
  width: calc(100% - 40px);
  margin: 20px 20px;
  border-radius: 20px;
  padding-top: 10px;
  height: 170px;
  background-color: #e8e2e0;
}

.index_shop_other_login_0_icon img {
  width: 50px;
  height: 50px;
  display: block;
  margin: 0 auto;
  position: relative;
  top: 25px;
  border-radius: 50%;
}

.index_shop_other_login_0_icon {
  width: 100%;
  height: 100px;
}

.index_shop_other_login_0 {
  width: calc(100% - 40px);
  margin-left: 20px;
  height: 100%;
  background-color: #e8e2e0;
  border-radius: 20px;
}

.index_shop_other_rotation {
  width: calc(100% - 300px);
  height: 100%;
  float: left;
}

.index_shop_other_login {
  width: 300px;
  height: calc(100% - 200px);
  float: left;
}

.index_shop_other_rotation_img {
  width: 100%;
  height: 100%;
}

.index_shop_other_adv_box {
  width: calc(100% - 20px);
  height: 100px;
  margin: 20px 0px;
  background: #e8e2e0;
  border-radius: 15px;
  overflow: hidden;
}

.index_shop_other_rotation_box {
  width: 100%;
  height: 390px;
  overflow: hidden;
  border-top-left-radius: 30px;
}

.index_shop_other_title a {
  width: auto;
  display: block;
  height: 30px;
  padding-left: 10px;
  padding-right: 10px;
  line-height: 30px;
  margin-top: 10px;
  color: #442f1a;
}

.index_shop_other_title li {
  width: auto;
  height: 40px;
  float: left;
  margin-left: 10px;
}

.index_shop_other_title {
  width: 100%;
  height: 40px;
  margin-bottom: 10px;
}

.index_nav_box_lable i {
  margin: 0px 5px 0px 5px;
  position: relative;
  top: 7px;
}

.index_nav_box_lable a:hover {
  text-decoration: underline;
}

.index_nav_box_lable a {
  font-size: 14px;
  padding-left: 3px;
  padding-right: 3px;
  font-family: "新宋体", serif;
  position: relative;
  top: 5px;
  color: #958a7e;
}

.index_nav_box_lable {
  width: calc(100% - 40px);
  height: 30px;
  display: flex;
  flex-wrap: nowrap;
  margin-left: 10px;
  color: #958a7e;
}

.index_shop_type_nav_box img {
  width: 20px;
  height: 20px;
  position: relative;
  top: 5px;
  left: 5px;
}

.index_shop_type_nav_box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: nowrap;
}

.index_shop_type_nav_title {
  width: 100%;
  margin-top: 10px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
}

.index_shop_type_other {
  width: calc(100% - 200px);
  float: right;
  height: 100%;
}

.index_shop_type_nav li:hover {
  background-color: #958a7e20;
}

.index_shop_type_nav li {
  width: 100%;
  height: 30px;
  margin-top: 5px;
}

.index_shop_type_nav {
  width: 200px;
  height: 100%;
  float: left;
}

.index_shop_type {
  width: 100%;
  height: 580px;
  background-color: #ffffff;
  border-radius: 10px;
  overflow: hidden;
}

.index_more_nav_box_mid {
  width: 1200px;
  height: auto;
  margin: 10px auto;
}

.index_more_nav_box {
  width: 100%;
  height: auto;
  display: inline-table;
  background-color: #e8e2e0;
}
</style>
